<template>
  <div>
    <div v-show="!selectAdress">
      <van-cell-group>
        <van-cell title="收货地址" is-link @click="showAddress">
          <div>{{selectedAddress.receiverAddress}}</div>
          <div>
            <span>{{selectedAddress.receiver}}</span>
            <span>{{selectedAddress.receiverMobile}}</span>
          </div>
        </van-cell>
      </van-cell-group>

      <van-cell-group>
        <van-cell :key="index" v-for="(item,index) in orderSkus">
          <van-card
            :num="item.num"
            :price="formatPrice(item.price)"
            :desc="item.desc"
            :title="item.title"
            :thumb="item.imgUrl"
          />
        </van-cell>
      </van-cell-group>

      <van-submit-bar :price="totalPrice" :button-text="submitBarText" @submit="onSubmit" />
    </div>

    <div v-show="selectAdress">
      <address-list ref="addressList" @backPre="receiveAListBackPre" />
    </div>

    <!-- 优惠券单元格 -->
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showCouponList = true"
    />

    <!-- 优惠券列表 -->
    <van-popup v-model="showCouponList" position="bottom">
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onCouponChange"
        :show-exchange-bar="false"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Toast,
  Card,
  Stepper,
  Field,
  SubmitBar,
  CouponCell,
  CouponList,
  Popup
} from "vant";
import AddressList from "./addressList";
import { apiListAddress, apiSubmitOrder, apiGoPay } from "@/api/order";
import { apiGetCouponVo } from "@/api/promotion";
export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Card.name]: Card,
    [Stepper.name]: Stepper,
    [Field.name]: Field,
    [SubmitBar.name]: SubmitBar,
    [AddressList.name]: AddressList,
    [CouponCell.name]: CouponCell,
    [CouponList.name]: CouponList,
    [Popup.name]: Popup
  },

  data() {
    return {
      selectAdress: false,
      chosenCoupon: 1,
      showCouponList: false,
      skuTitle: "选择商品",
      orderSkus: [],
      order: {
        remark: ""
      },
      selectedAddress: {
        id: "",
        receiverMobile: "",
        receiverAddress: "",
        receiver: ""
      },
      addressList: [],
      disabledCoupons: [],
      coupons: {
        available: 1,
        condition: "无使用门槛\n最多优惠12元",
        reason: "",
        value: 150,
        name: "优惠券名称",
        startAt: 1489104000,
        endAt: 1514592000,
        valueDesc: "1.5",
        unitDesc: "元"
      },
      selectCouponId: ""
    };
  },

  methods: {
    formatPrice(price) {
      return (price / 100).toFixed(2);
    },
    onSubmit() {
      const orderSkuParamList = [];
      this.orderSkus.forEach(item => {
        orderSkuParamList.push({
          skuId: item.id,
          num: item.num
        });
      });
      const params = {
        userCouponId: this.selectCouponId,
        shippingAddressId: this.selectedAddress.id,
        orderSkuParamList: orderSkuParamList
      };
      console.log(params);
      apiSubmitOrder(params).then(res => {
        console.log(res);
        if (res.status === 0) {
          apiGoPay({ orderNo: res.data, payPlatform: 1 }).then(res => {
            console.log(res);
            document.write(res);
          });
        } else {
          Toast(res.msg);
        }
      });
    },
    showAddress() {
      this.selectAdress = true;
      this.$refs.addressList.pushData({
        list: this.addressList,
        selectedAddress: this.selectedAddress
      });
    },
    receiveAListBackPre(selectedAddress) {
      console.log("receiveAListBackPre", selectedAddress);
      this.selectedAddress = selectedAddress;
      this.selectAdress = false;
    },
    onCouponChange(index) {
      this.showCouponList = false;
      this.chosenCoupon = index;
      this.selectCouponId = this.coupons[index].id;
    }
  },
  created() {
    this.orderSkus = JSON.parse(this.$route.query.orderSkus);
    console.log(this.orderSkus);

    apiGetCouponVo({ totalPrice: 0 }).then(res => {
      console.log(res);
      const coupons = [];
      res.forEach(item => {
        const coupon = {
          id: item.userCouponId,
          available: 1,
          condition: item.condition,
          reason: "",
          value: item.value,
          name: item.condition,
          startAt: item.startTime,
          endAt: item.endTime
        };
        coupon.valueDesc = (item.value / 100).toFixed(1);
        if (item.couponType == 1) {
          coupon.unitDesc = "元";
        } else if (item.couponType == 2) {
          coupon.unitDesc = "折";
        }
        coupons.push(coupon);
      });
      console.log("coupons", coupons);
      this.coupons = coupons;
    });

    apiListAddress().then(res => {
      console.log(res);
      this.addressList = res.data;
      const selectedAddress = this.addressList.filter(item => item.selected)[0];
      if (selectedAddress) {
        this.selectedAddress = selectedAddress;
      }
    });
  },
  computed: {
    submitBarText() {
      return "结算";
    },
    totalPrice() {
      let tPrice = this.orderSkus
        .map(item => item.price * item.num)
        .reduce((total, num) => total + num);
      console.log(tPrice);
      return tPrice;
    }
  }
};
</script>

<style lang="less">
</style>
